<template>
    <div class="task">
        <div class="task-top">
            <span class="titleOne">服务</span>
            <span class="titleTwo" @click="Release">发布任务</span>
        </div>
        <div class="title" >
            <ul>
                <li v-for="item in TKinds">
                    <span :class="{active:isActive == item.id}" @click="tab(item.id)">{{item.taskType}}</span>
                </li>
                <li class="kinds" v-if="kindsShow">
                    <span :class="{active:isActive== 'kinds'}"  @click="tab('kinds')">更多</span>
                </li>
            </ul>
            <!-- <ul>
                <li class="all"> 
                    <span :class="{active:isActive== 0}"  @click="tab(0)">全部</span>
                </li>
                <li v-for="item in taskKinds">
                    <span :class="{active:isActive == item.id}" @click="tab(item.id)">{{item.taskType}}</span>
                </li>
                <li class="all"> 
                    
                </li>
            </ul>
            <div class="kinds">
                <span :class="{active:isActive== 'kinds'}"  @click="tab('kinds')">更多</span>
            </div> -->
            <div class="kindsMore" v-show="More">
                <div class="More-box">
                        <p class="Box-ShowBoxOne">
                            <img src="../assets/Mymi/close.png" @click="getclose">
                        </p>
                        <div class="kinds-box">
                            <span class="spankinds" v-for="item in taskKinds"  @click="tab(item.id,'More')">{{item.taskType}}</span>
                        </div>
                </div>
            </div>
        </div>
        <!-- <component :is="componentId" :typeid = "isActive" ref="child"></component> -->
        <div class="taskList">
            <!-- banneer图 -->
            <div class="banner">
            <van-swipe :autoplay="3000" indicator-color="white" >
                <van-swipe-item v-for=" (Play,indexsa) in TurnsToPlay" :key="indexsa" >
                    <img :src="url+ Play.image" alt />
                </van-swipe-item>
            </van-swipe>
            </div>
            <!-- <div class="tabCon">
            <span :class="{active:tabCon=='tab1'}" @click="tabItem('tab1')">兼职</span>
            <span :class="{active:tabCon=='tab2'}" @click="tabItem('tab2')">招工</span>
            <span :class="{active:tabCon=='tab3'}" @click="tabItem('tab3')">租赁</span>
            </div> -->
            <div class="item">
                <div class="iconTab"  @click="changePrice(1)">
                    <span class="price" :class="current==1?'actives':''" >金额</span>
                    <span class="icon">
                    <i class="iconfont icontop-s" :class="currents==2?'actIcon':''"></i>
                    <i class="iconfont iconbelow-s" :class="currents==3?'actIcon':''"></i>
                    </span>
                </div>
                <div class="iconTab" @click="changeTime(2)">
                    <span class="price" :class="current==2?'actives':''" >发布时间</span>
                    <span class="icon">
                    <i class="iconfont icontop-s" :class="currents==4?'actIcon':''"></i>
                    <i class="iconfont iconbelow-s" :class="currents==5?'actIcon':''"></i>
                    </span>
                </div>
                <div class="iconTab" @click="changePerson(3)">
                    <span class="price" :class="current==3?'actives':''" >参与人数</span>
                    <span class="icon">
                    <i class="iconfont icontop-s" :class="currents==6?'actIcon':''"></i>
                    <i class="iconfont iconbelow-s" :class="currents==7?'actIcon':''"></i>
                    </span>
                </div>
            </div>
            <!-- 列表 -->
            <div class="list">
                <ul>
                    <li @click="openShowModel(index)" v-for="(item, index) in taskList" :key="index">
                        <div class="leftImg">
                            <img :src="url+item.image" alt="">
                        </div>
                        <div class="rightCon">
                            <p class="one">{{item.title}}</p>
                            <p class="two">
                                <i class="iconfont iconshangkerenshu"></i>
                                <span>{{item.joinNum=='null'?'0':item.joinNum}}/{{item.personNum=='null'?'0':item.personNum}}</span>
                            </p>
                            <p class="three">
                            <span>
                                <i class="iconfont iconyanjing"></i>
                                {{item.pageView}}
                            </span>
                            <span>{{item.pubdate}}</span>
                            </p>
                            <p class="four">￥{{item.money}}</p>
                        </div>
                    </li>
                </ul>
                <div class="nodata" v-if="taskList.length>0">没有更多了</div>
                <div class="nodata" v-else>暂无任务</div>
            </div>
            <!-- 身份认证弹窗 -->
            <div class="showModel" v-show="showModel">
                <div class="showBox">
                    <div class="one">
                        <i class="iconfont iconshanchuguanbicha" @click="closeShowModel"></i>
                    </div>
                    <div class="two">{{authentication}}</div>
                    <div class="three">
                        <img src="../assets/task/shnefen.png" alt />
                    </div>
                    <div class="four" @click="goRealName" v-show="Noauthentication">立即认证</div>
                </div>
            </div>
       </div>
      <tabBar></tabBar>
  </div>
</template>

<script>
import tabBar from '../components/tabBar';
export default {
    name:'task',
    data (){
        return {
            isActive:0,
            componentId:'taskList',
            taskKinds:[],
            TKinds:[],
            More:false,
            kindsShow:true,
            
            tabCon: "tab1",
            showModel: false,
            current:1,
            currents:'',
            taskList:[],//任务列表
            flag:true,
            pageNum:1,//页码
            pageSize:10,//每页条数
            vid:"",//村庄id
            total:"",//总条数
            tid:"",//任务id
            ByValidation: "",//实名验证
            userid:"",//用户id
            authentication:"身份认证",
            Noauthentication:true,

            getClick :"time",
            TurnsToPlay:[{image:require("../assets/Mymi/InformImg.png")},{image:require("../assets/Mymi/InformImg.png")},{image:require("../assets/Mymi/InformImg.png")}],//轮播图
            url:"",
       }
    },
    created (){
        this.MenuList();
        if(this.$route.query.task){
           this.componentId='myTask'
           this.isActive='myTask'
        }
        window.addEventListener('scroll', this.handleScroll, true);
        this.loadComments();
        this.loadCommentsVid();
        this.TakeTurnsToPlay();
        this.url = window.domain;
    },
    destroyed() {
         window.addEventListener('scroll', this.handleScroll, true);
    },
    methods:{
        MenuList(){
            this.$axios.post("/taskType/list",{

            }).then(res =>{
                console.log("任务类型",res)
                this.isActive = res.data.rows[0].id;
                if(res.data.rows.length <= 3 && res.data.rows.length>0){
                    this.kindsShow = false;
                    for (let i = 0; i < res.data.rows.length; i++) {
                       this.TKinds.push(res.data.rows[i])
                    }
                }
                if(res.data.rows.length > 3){
                    this.kindsShow = true;
                    for (let i = 0; i < 3; i++) {
                       this.TKinds.push(res.data.rows[i])
                    }
                }
                this.taskKinds = res.data.rows;
                this.myTaskList();
                console.log(this.taskKinds)
                // this.taskKinds = res.data.rows;
            })
        },
      //切换
       tab (val,Mor){
          this.isActive = val;
          if(Mor == 'More'){
              this.myTaskList();
              this.More = false;
          }
          else{
                if(val == "kinds"){
                    this.More = true;
                    // this.myTaskList();
                }
                else{
                    this.myTaskList();
                }
          }
          
       },
       getclose(){
           this.More = false;
       },
        // 监听鼠标滚动
        handleScroll() {
                //方法一
                var top = Math.floor(document.body.scrollTop || document.documentElement.scrollTop || window.pageXOffset)
                // console.log(top)
                if(top > 50 * this.pageNum * this.pageSize && this.pageNum * this.pageSize < this.total){
                    this.pageNum = this.pageNum+1;
                    console.log("页数",this.pageNum)
                    if( this.getClick == "money1"){
                        this.myTaskList("asc","money");
                        return false;
                    }
                    if (this.getClick == "money2"){
                        this.myTaskList("desc","money");
                        return false;
                    }
                    if( this.getClick == "pubdate1"){
                        this.myTaskList("asc","pubdate");
                        return false;
                    }
                    if (this.getClick == "pubdate2"){
                        this.myTaskList("desc","pubdate");
                        return false;
                    }
                    if( this.getClick == "personNum1"){
                        this.myTaskList("asc","personNum");
                        return false;
                    }
                    if (this.getClick == "personNum2"){
                        this.myTaskList("desc","personNum");
                        return false;
                    }
                    if(this.getClick == "time"){
                        this.myTaskList();
                        return false;
                    }  
                }
                if(top < 200){
                this.pageNum = 1;
                return false;
                }
            
            },
        //取出用户id
        loadComments() {
          var list = JSON.parse(localStorage.getItem("key"));
          this.userid = list.userId;
        },
        //去出Vid
        loadCommentsVid() {
            var list = localStorage.getItem("vid");
            if(list == 'undefined'){
                this.vid = null;
            }
            else{
                this.vid = list;
            }
        },
        //轮播图
        TakeTurnsToPlay(){
            this.$axios.post("/slideshow/list",{

            }).then(res => {
                console.log("轮播图",res);
                this.TurnsToPlay = res.data.rows;
            })
        },

        //任务列表
        myTaskList (isAsc,orderByColumn){
        //   console.log("vId",this.vid)
        //   console.log("isAsc","orderByColumn","页数")
            console.log(isAsc,orderByColumn,this.pageNum)
            // alert(this.isActive)
            this.$axios.post('/task/userSelectList',{
            vId:this.vid,
            type:this.isActive == 0 || this.isActive == 'kinds' ? null : this.isActive,
            orderByColumn:orderByColumn,
            isAsc:isAsc,
            pageNum:this.pageNum,
            pageSize:this.pageSize
            }).then(res=>{
            console.log(res)
            if(res.data.code==0 && this.pageNum == 1){
                this.taskList=res.data.rows
                this.total=res.data.total
            }
            if(res.data.code==0 && this.pageNum > 1 && this.taskList.length < this.total){
                let List = res.data.rows
                for(let i = 0;i<List.length;i++){
                    this.taskList.push(List[i]);
                }
                console.log(this.taskList)
            }
            
            })
        },
    
        //关闭身份认证弹窗
        closeShowModel() {
        this.showModel = false;
        },
        // 判断是否跳转实名制认证页面,//打开身份认证弹窗 
        openShowModel(index){
            this.$axios.get("/user/auth/selectAuthUId?id="+this.userid).then(res =>{
                console.log("审核状态",res);
                this.ByValidation = res.data.data;
                this.taskListUrl(index)
            })
        },
        //实名制跳转判断
        taskListUrl(index){
            if(this.ByValidation == 0){
                this.showModel = true;
                this.authentication = "正在审核中";
                this.Noauthentication = false
            }
            else if(this.ByValidation == 2 || this.ByValidation == 4){
                this.showModel = true;
                this.authentication = "身份认证";
                this.Noauthentication = true;
                this.tid = this.taskList[index].tid;
            }
            else{
                this.$router.push({path:"/taskDetails",query:{name:"兼职详情",tid:this.taskList[index].tid}});
            }
        },
        //实名认证
        goRealName() {
            this.$router.push({path:"/Autonym",query:{theme:"详情",tid:this.tid,url:"/task"}});
        },
        //切换金额
        changePrice (num){
            if(this.flag){
                if(num==1){
                    this.current=1;
                    this.currents=2;
                    this.flag=false;
                    this.getClick = "money1"
                    this.taskList = [];
                    // this.pageNum = 1;
                    this.myTaskList("asc","money");
                }
            }else{
                this.current=1;
                this.currents=3;
                this.flag=true;
                this.taskList = [];
                this.getClick = "money2";
                //  this.pageNum = 1;
                this.myTaskList("desc","money");
                    
            }
        },
        //切换发布时间
        changeTime (num){
            if(this.flag){
                if(num==2){
                this.current=2;
                this.currents=4;
                this.flag=false;
                this.taskList = [];
                this.getClick = "pubdate1";
                this.myTaskList("asc","pubdate");
                }
            }else{
                this.current=2;
                this.currents=5;
                this.flag=true;
                this.taskList = [];
                this.getClick = "pubdate2";
                //  this.pageNum = 1;
                this.myTaskList("desc","pubdate");
                
            }
        },
        //切换参与人数
        changePerson (num){
            if(this.flag){
                if(num==3){
                this.current=3;
                this.currents=6;
                this.flag=false;
                this.taskList = []
                this.getClick = "personNum1";
                // this.pageNum = 1;
                this.myTaskList("asc","personNum");
                
                }
            }else{
                this.current=3;
                this.currents=7;
                this.flag=true;
                this.taskList = [];
                this.getClick = "personNum2";
                this.myTaskList("desc","personNum");     
            }
        },
        Release(){
            this.$router.push("/Release")
        }

    },
    components:{
       tabBar,
    }
  }
</script>

<style lang="less" scoped>
.task{
    width: 100%;
    height: 100%;
    background-color: #f8f8f8;
    font-size: 0;
    position: absolute;
    top:0rem;
    left: 0rem;
    .task-top{
        width: 100%;
        font-size: 0.36rem;
        color:#333;
        height: 1.25rem;
        line-height: 1.25rem;
        background-color: #fff;
        padding: 0 0.2rem;
        border-bottom:1px solid rgb(253,253,253);
        .titleOne{
            padding: 0.4rem 1.7rem 0.4rem 3.3rem;
        }
        .titleTwo{
            font-family: "PingFang-SC-Medium";
            font-weight: Medium;
            font-size: 0.28rem;
            color:#38A83F;
        }
    }
   .title{
      width: 100%;
      height: 1rem;
      font-size: 0.28rem;
      background-color: #fff;
      padding:0.3rem 0 0.3rem;
      box-sizing: border-box;
      color:#333;
      position: relative;
      ul{
            // display: -webkit-box;
            // overflow-x: scroll;
            // justify-content: space-around;
            display: flex;
            // width: 5.625rem;
            // height: 0.7rem;
            li{
                width: 100%;
                height: 0.7rem;
                // margin: 0rem 0.18rem; 
                text-align: center;
                .active{
                        color:#38A83F;
                        border-bottom: 2px solid #38A83F;
                        padding-bottom: 0.2rem;
                        box-sizing: border-box;
                }
            }
            .kinds{
                    // width: 1.875rem;
                    width: 100%;
                    height: 0.7rem;
                    // background: white;
                    // position: absolute;
                    // top: 0.5rem;
                    // right: 0rem;
                    text-align: center;
                    .active{
                        color:#38A83F;
                        border-bottom: 2px solid #38A83F;
                        padding-bottom: 0.2rem;
                        box-sizing: border-box;
                    }
            }  
            // .all{
            //     display: inline-block;
            //     width: 1rem;
            //     height: 0.7rem;
            // }
            // .active{
            //     color:#38A83F;
            //      border-bottom: 2px solid #38A83F;
            //     padding-bottom: 0.2rem;
            //     box-sizing: border-box;
            // }
        }
        // .kinds{
        //     width: 1.36rem;
        //     height: 0.7rem;
        //     // margin: 0rem 0.18rem;
        //     background: white;
        //     position: absolute;
        //     top: 0.5rem;
        //     right: 0rem;
        //     text-align: center;
        //     .active{
        //         color:#38A83F;
        //          border-bottom: 2px solid #38A83F;
        //         padding-bottom: 0.2rem;
        //         box-sizing: border-box;
        //     }
        // }  
        .kindsMore{
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0rem;
            left:0rem;
            background: rgba(50, 50, 50,0.8);
            z-index: 10;
            .More-box{
                width: 5.2rem;
                height: 4.44rem;
                background: #FFFFFF;
                margin: 50% auto;
                border-radius: 0.2rem;
                overflow-y: scroll;
                .Box-ShowBoxOne{
                    width :100%;
                    height: 0.8rem;
                    font-size: 0;
                    line-height: 0.8rem;
                    img{
                        width: 0.4rem;
                        height: 0.4rem;
                        margin-left: 4.6rem;
                    }
                }
                .kinds-box{
                    width: 4.7rem;
                    display: flex;
                    flex-flow: wrap;
                    text-align: center;
                    line-height: 0.5rem;
                    margin: 0 auto;
                    .spankinds{
                        display: inline-block;
                        width: 1.1rem;
                        height: 0.5rem;
                        color: white;
                        border-radius: 0.2rem;
                        background: green;
                        margin: 0.1rem 0.23rem ;
                        // // margin-top: 0.2rem;
                        padding: 0rem 0.05rem;
                    }
                }
                
            }
        } 
   }
   .taskList {
    width: 100%;
    height: 100%;
    background-color: #f8f8f8;
    position: relative;
    .banner {
        padding: 0.2rem 0.3rem;
        box-sizing: border-box;
        img {
            width: 6.9rem;
            height: 1.53rem;
        }
    }
    .tabCon {
        display: flex;
        justify-content: space-around;
        height: 0.8rem;
        font-size: 0.26rem;
        background-color: #fff;
        color: #1a1a1a;
        padding: 0.25rem 0;
        box-sizing: border-box;
        .active {
        color: #38a83f;
        border-bottom: 2px solid #38a83f;
        padding-bottom: 0.4rem;
        box-sizing: border-box;
        }
    }
    .item {
        font-size: 0.26rem;
        color: #999;
        display: flex;
        justify-content: space-around;
        padding: 0.2rem 0;
        box-sizing: border-box;
        background-color: #fff;
        border-top: 1px solid #eee;
        margin-top: 0.05rem;

        .iconTab {
            display: flex;
            .actives{
            color:#38A83F;
            }
            .price {
                margin-right: 0.1rem;
            }

            .icon {
                display: flex;
                flex-direction: column;
                font-size: 0.14rem;
                align-items: center;
                i {
                font-size: 0.2rem;
                transform: scale(0.9);
                margin-top:-0.05rem;
                &.iconbelow-s {
                    margin-top: -0.1rem;
                }
                }
                .actIcon{
                color:#38A83F;
                }
            }
        }
    }
    // 兼职列表
    .list {
        width: 100%;
        margin-bottom: 1.2rem;
        ul {
            background-color: #f8f8f8;
            li {
                display: flex;
                justify-content: flex-start;
                margin-top: 0.1rem;
                background-color: #fff;
                padding: 0.3rem;
                box-sizing: border-box;
                .leftImg {
                    width: 2rem;
                    height: 2rem;
                    border-radius: 0.2rem;
                    overflow: hidden;
                    margin-right: 0.2rem;
                    img {
                        width: 100%;
                        height: 100%;
                    }
                }
                .rightCon {
                    font-size: 0.26rem;
                    color: #1a1a1a;
                    width: 4.7rem;
                    .one {
                        color: #171717;
                        font-weight: Medium;
                        font-family: PingFang-SC-Medium;
                    }
                    .two {
                        color: #737373;
                        font-size: 0.24rem;
                        margin: 0.1rem 0;
                        i {
                            font-size: 0.24rem;
                        }
                    }
                    .three {
                        display: flex;
                        justify-content: space-between;
                        font-size: 0.22rem;
                        color: #b9b9b9;
                        margin: 0.1rem 0;
                        i {
                            font-size: 0.24rem;
                        }
                    }
                    .four {
                        margin-top: 0.1rem;
                        font-size: 0.3rem;
                        color: #ff3f3f;
                    }
                }
            }
        }
        .nodata {
            font-size: 0.3rem;
            color: #666;
            text-align: center;
            padding: 0.2rem 0;
            background-color: #fff;
        }
    }
    // 身份认证
    .showModel {
        position: fixed;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.5);
        .showBox {
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
            margin: auto;
            margin-top: 3rem;
            background-color: #fff;
            width: 5.75rem;
            height: 5.32rem;
            border-radius: 0.2rem;
            padding: 0.15rem 0.2rem;
            box-sizing: border-box;
            font-size: 0.26rem;
            .one {
                text-align: right;
                i {
                    font-size: 0.3rem;
                }
            }
            .two {
                text-align: center;
                margin-top: 0.2rem;
                font-size: 0.36rem;
                color: #333333;
                font-weight: R;
            }
            .three {
                width: 2.04rem;
                height: 2.04rem;
                border-radius: 50%;
                overflow: hidden;
                margin: 0 auto;
                margin-top: 0.3rem;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .four {
                margin: 0 auto;
                width: 3.41rem;
                height: 0.65rem;
                line-height: 0.65rem;
                text-align: center;
                color: #fff;
                font-size: 0.32rem;
                background: rgba(56, 168, 63, 1);
                border-radius: 0.33rem;
                margin-top: 0.45rem;
            }
        }
    }
    }

}

</style>
